<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>
        <meta name="format-detection" content="telephone=no"/>
        <title>api</title>
        <link rel="stylesheet" type="text/css" href="../../css/api.css" />
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <link rel="stylesheet" type="text/css" href="../../css/main-bill-detail.css" />
        <link rel="stylesheet" href="../../script/agile/css/flat/flat.component.css"/>
        <link rel="stylesheet" href="../../script/agile/css/flat/flat.color.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
        <style>
            #wrap {
                height: 100%;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-flex-flow: column;
                flex-flow: column;
            }
            #queryRealData {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
            }
            #nav {
                text-align: center;
                background-color: #f2f2f2;
            }
            #nav ul {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-flex-direction: row;
                flex-direction: row;
            }
            #nav ul li {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
            }
            #header .header {
                display: none;
            }
            #header .active {
                display: block;
            }
            #header .signalList .submenu, #header .bugFlow .submenu {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-flex-direction: row;
                flex-direction: row;
                background-color: #fff;
            }
            #header .signalList .submenu li, #header .bugFlow .submenu li {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
            }
            #header .scan {
                display: inline-block;
                position: absolute;
                bottom: 2px;
                right: 20px;
                width: 40px;
                height: 40px;
                text-indent: -9999px;
                background: url(../../image/scan.png) no-repeat center center;
                background-size: 24px;
                -webkit-background-size: 24px;
            }
            input {
                width: 100%;
                height: 45%;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
        		<div id="main">
                <header id="header">
                    <div class="titlebar">
                        <h1>信号性能</h1>
                        <a class="aui-iconfont aui-icon-left left-icon" tapmode="active" onclick="reback();"></a>
                    </div>
                </header>
            </div>
            <div id="queryRealData">
                <table width="100%">
                    <tr width="100%" style="height:50px;">
                        <td width="30%" style="text-align:right;"><h3>站址名称：</h3></td>
                        <td width="70%">
                        <input id="stationNameId" type="text" value="" disabled="disabled"/>
                        </td>
                    </tr>
                    <tr width="100%" style="height:50px;">
                        <td width="30%" style="text-align:right;"><h3>设备名称：</h3></td>
                        <td width="70%">
                        <input id="devNameId" type="text" value="" disabled="disabled"/>
                        </td>
                    </tr>
                    <tr width="100%" style="height:50px;">
                        <td width="30%" style="text-align:right;"><h3>信号名称：</h3></td>
                        <td width="70%">
                        <input id="signalNameId" type="text" value="" disabled="disabled"/>
                        </td>
                    </tr>
                    <tr width="100%" style="height:50px;">
                        <td width="30%" style="text-align:right;"><h3>信号性能值：</h3></td>
                        <td width="70%">
                        <input id="midValueId" type="text" value="" disabled="disabled"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="container" style="width:700px;height:400px;margin:0 auto;"></div>
        </div>
    </body>
    <script src="../../script/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/doT.min.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/config.js"></script>
    <script type="text/javascript" src="../../script/client.api.js"></script>
    <script type="text/javascript" src="../../script/aui-alert.js"></script>
    <script type="text/javascript" src="../../script/highcharts.js"></script>
    <script>
        var objGraph = null;
        var xAxisArr = new Array();
        var lineData = new Array();
        var interval = null;
        apiready = function() {
            objGraph = api.require('graph');
            initHeader();
            var container = $api.byId('container');
            container.style.width = (api.winWidth - 10) + "px";
            container.style.height = (api.winHeight - 300) + "px";
//          var stationId = api.pageParam.stationId;
//          var stationModel = $api.getStorage(stationId);
            var stationModel = $api.getStorage('stationModel');
            //  alert('stationModel:\n' + getObj(stationModel));
            $api.byId('devNameId').value = api.pageParam.deviceName;
            $api.byId('midValueId').value = api.pageParam.measuredval;
            $api.byId('signalNameId').value = api.pageParam.semaphorename;
            $api.byId('stationNameId').value = stationModel.st_name;
            //refreshMidValue();
            openLineChart();
            //interval = window.setInterval(refreshMidValue(),10000);
        };
        function openLineChart() {
            Highcharts.setOptions({
                global : {
                    useUTC : false
                }
            });
            var chart;
            $('#container').highcharts({
                chart : {
                    type : 'spline',
                    animation : Highcharts.svg, // don't animate in old IE
                    marginRight : 10,
                    events : {
                        load : function() {
                            // set up the updating of the chart each second
                            var series = this.series[0];
                            interval = window.setInterval(function() {
                                refreshMidValue(series);
                            }, 5000);
                        }
                    }
                },
                title : {
                    text : '实时性能动态走势图--5秒'
                },
                xAxis : {
                    type : 'datetime',
                    tickPixelInterval : 100
                },
                yAxis : {
                    title : {
                        text : '实时性能动态走势图--5秒'
                    },
                    plotLines : [{
                        value : 0,
                        width : 1,
                        color : '#808080'
                    }]
                },
                tooltip : {
                    formatter : function() {
                        return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
                    }
                },
                legend : {
                    enabled : false
                },
                exporting : {
                    enabled : false
                },
                series : [{
                    name : '信号性能值',
                    data : (function() {
                        // generate an array of random data
                        var data = [], time = (new Date()).getTime(), i;
                        for ( i = -9; i <= 0; i++) {
                            data.push({
                                x : time + i * 5000,
                                y : 0
                            });
                        }
                        return data;
                    })()
                }]
            });
        }

        function reback() {
            window.clearInterval(interval);
            api.closeWin();
        }

        function refreshMidValue(series) {
            var deviceId = api.pageParam.deviceCode;
            var fsuId = api.pageParam.devFsuId;
            var semaphoreId = api.pageParam.semaphoreId;
            var semaphoreIdArr = semaphoreId.split("_");
            var mid = semaphoreIdArr[semaphoreIdArr.length - 1];
            var opts = {
                fsuId : fsuId,
                deviceId : deviceId,
                semaphoreId : mid
            };
            $client.getMidRealData(opts, function(ret, err) {
                if (ret) {
                    if (ret.success) {
                        var x = (new Date()).getTime(), // current time
                        y = parseFloat(ret.model.measuredval);
                        series.addPoint([x, y], true, true);
                        $api.byId('midValueId').value = ret.model.measuredval;
                    } else {
                        api.toast({
                            msg : ret.data_info,
                            location : 'middle'
                        });
                    }
                } else {
                    api.toast({
                        msg : err.msg,
                        location : 'middle'
                    });
                }
            });
        }
    </script>
</html>